<!-- 问题管理 -->
<template>
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>心理答疑管理</el-breadcrumb-item>
      <el-breadcrumb-item>问题管理</el-breadcrumb-item>
    </el-breadcrumb>
    <hr />

    <!-- 头部搜索栏 -->
    <!-- 实例是：formInline -->
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="问题标题">
          <el-input
            v-model="formInline.title"
            placeholder="请输入搜索问题"
            clearable
            @clear="handleClear1()"
          />
        </el-form-item>
        <el-form-item label="提问昵称">
          <el-input
            v-model="formInline.nickname"
            placeholder="请输入提问昵称"
            clearable
            @clear="handleClear2()"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData()">搜索</el-button>
          <el-button type="danger" @click="delIds()">批量删除</el-button>
        </el-form-item>
      </el-form>

      <!-- 查看与删除 -->
      <!-- 实例是editForm -->
      <el-dialog v-model="edit" title="问题详情">
        <el-form :model="editForm" label-width="auto">
          <el-form-item label="问题标题">
            <el-input v-model="editForm.problemTitle" readonly placeholder="请输入测评题目" />
          </el-form-item>
          <el-form-item label="内容简介">
            <el-input
              type="textarea"
              rows="10"
              resize="none"
              readonly
              v-model="editForm.problemContent"
              placeholder="请输入内容简介"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="editNo()">关闭</el-button>
          </div>
        </template>
      </el-dialog>
    </div>

    <!-- 表格数据展示 -->
    <!-- 实例是tableData -->
    <div>
      <el-table
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
        style="width: 95%; margin-left: 30px"
      >
        <el-table-column :selectable="selectable" type="selection" width="55" />
        <el-table-column label="ID" width="120">
          <template #default="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column property="title" label="问题标题" />
        <el-table-column show-overflow-tooltip width="250px" property="content" label="问题内容" />
        <el-table-column property="systemUsers.nickname" label="提问用户昵称" />
        <el-table-column property="questionTime" label="提问时间" />

        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="selYes(scope.row)">查看</el-button>
            <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 查看 -->
    <el-dialog v-model="dialogFormVisible" title="查看问题详情" width="730px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="问题标题" :label-width="formLabelWidth">
          <el-input
            v-model="form.title"
            placeholder="请输入问题标题"
            readonly
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="问题内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            rows="10"
            resize="none"
            readonly
            v-model="form.content"
            placeholder="请输入问题内容"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="提问用户昵称" :label-width="formLabelWidth">
          <el-input
            v-model="form.systemUsers.nickname"
            placeholder="请输入提问用户昵称"
            readonly
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="提问时间" :label-width="formLabelWidth">
          <el-input
            v-model="form.questionTime"
            placeholder="请输入提问时间"
            readonly
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer" style="text-align: center">
          <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 分页设置 -->
    <div>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

// 设置表单元素接收数据
const formInline = reactive({
  title: '',
  nickname: '',
})
//查看弹出框初始化
const dialogFormVisible = ref(false)
// 查看弹出框数据
const form = reactive({})
//查看方法
const selYes = async (row) => {
  console.log(row)
  try {
    const resp = await axios.get(`question/findByIdDuo/${row.id}`)
    console.log(resp)
    if (resp.code === 200) {
      Object.assign(form, resp.data)
      dialogFormVisible.value = true
    } else {
      ElMessage.error(resp.message)
    }
  } catch (error) {
    console.error('Error:', error)
    ElMessage.error('获取数据失败')
  }
}
// 设置表格接收数据
const tableData = reactive([{}])

// 页面挂载后加载数据
onMounted(() => {
  getData()
})

// 清除输入框自动搜索
const handleClear1 = () => {
  formInline.evaluationName = ''
  getData()
}
const handleClear2 = () => {
  formInline.evaluationIntro = ''
  getData()
}
const handleClear3 = () => {
  formInline.classifyName = ''
  getData()
}

// 删除
const handleDelete = (index, row) => {
  console.log(row.id)
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      ids.value = multipleSelection.value.map((row) => row.id).join(',')
      console.log(ids.value)
      axios
        .delete(`question/del/${row.id}`)
        .then((resp) => {
          console.log(resp)
          if (resp.code == 200) {
            ElMessage({
              type: 'success',
              message: resp.message,
            })
          } else {
            ElMessage.error(resp.message)
          }
        })
        .catch((error) => {
          console.error('Error:', error)
          ElMessage.error('请求失败，请稍后再试')
        })
        .finally(() => {
          getData()
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}

// 批量删除
const multipleSelection = ref([])
const ids = ref('')
const delIds = () => {
  if (multipleSelection.value.length == 0) {
    ElMessage('请选择要删除的数据！')
  } else {
    ElMessageBox.confirm('此操作将永久删除该数据, 是否继续??', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        ids.value = multipleSelection.value.map((row) => row.id).join(',')
        console.log(ids.value)
        axios
          .delete(`question/delBatch?ids=${ids.value}`)
          .then((resp) => {
            console.log(resp)
            if (resp.code == 200) {
              ElMessage({
                type: 'success',
                message: resp.message,
              })
            } else {
              ElMessage.error(resp.message)
            }
          })
          .catch((error) => {
            console.error('Error:', error)
            ElMessage.error('请求失败，请稍后再试')
          })
          .finally(() => {
            getData()
          })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
  }
}
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

// 设置分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  pageSize.value = val
  getData()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  currentPage.value = val
  getData()
}

// 获取axios对象实例发送请求
const axios = getCurrentInstance().appContext.config.globalProperties.axios
// 获取表单数据
const getData = () => {
  axios
    .get(
      `question/selectDuo?pageNum=${currentPage.value}&pageSize=${pageSize.value}&title=${formInline.title}&systemUsers.nickname=${formInline.nickname}`
    )
    .then((resp) => {
      total.value = resp.data.total
      console.log(resp.data)

      tableData.splice(0, tableData.length, ...resp.data.list)
    })
}
</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.custom-height {
  height: 300px; /* 设置自定义高度 */
}
</style>